<template>
  
<view class="mask" catchtouchmove="true">
  <view class="top">
    <view class="navbar">
      <img class="login-img" src="@/static/images/login_img_illustration@2x.png" >
    </view>
  <view class="bottom">
    <view class="input-box">
      <view class="input-box-top">
        <input class=" input top-input" type="text" placeholder="请输入手机号">
      </view>
      <view class="input-box-bottom">
        <view class="box">
          <input class=" input bottom-input" type="password" placeholder="请输密码">
          <img class="login-icon" src="@/static/images/眼睛动态组件_login_icon_eye_def@2x.png" alt="">
        </view>
      </view>
    </view>
    <view class="text">
      <view class="text-left" >注册</view>
      <view class="text-right">忘记密码</view>
    </view>
    <view class="login-button">立即登录</view>
    <view class="agreement">
      <checkbox class="interestthreecheckbox" />
      <!-- <img class="agreement-icon" src="@/static/images眼睛动态组件_login_icon_eye_def@2x.png" alt="" srcset=""> -->
    </view>
    <view class="agreement-text">已阅读协议<span class="xy">《协议链接》</span></view>
  </view>
  </view>
</view>
  
</template>


<script setup>


</script>

<style lang="scss">

.mask {
  // position: relative;
  .top {
    .navbar {
    width: 750rpx;
    height: 588rpx;
    background: #f2bb16;

    .login-img {
      margin: 45px 27px;
      width: 628rpx;
      height: 378rpx;
    }
  }

  .bottom {
    position: absolute;
    top: 542rpx;
    width: 750rpx;
    height: 934rpx;
    background: #fff;
    border-radius: 20px 20px 0px 0px;

    .input-box {
      position: relative;
      .input-box-top {
        position: absolute;
        top: 172rpx;
        left: 100rpx;
      }
      
      .input-box-bottom {
        display: flex;
        // flex-direction: row;
        position: absolute;
        // align-items: center;
        top: 280rpx;
        left: 100rpx;
        width: 100%;

        // .bottom-input {
        //   width: 540rpx;
        //   height: 70rpx;
        // }
        .box {
          display: flex;
          position: relative;
          flex-direction: row;
          align-items: center;
        }

        .login-icon {
            position: absolute;
            width: 48rpx;
            height: 48rpx;
            margin-left: 466rpx;
          }

      }

      .input {
        width: 270px;
        height: 35px;
        background: #fffdfd;
        border: 1px solid #c0bfbf;
        border-radius: 10px;
        font-size: 13px;
        font-weight: 400;
        box-sizing: border-box;
        text-indent: 10rpx;
        padding-left: 10rpx;
        &::placeholder {
          color: #bbbaba;
        }
        line-height: 32rpx;
      }

    }
  }
  }
  
  .text {
    width: 100%;
    .text-left {
      display: inline-block;
      margin-top: 412rpx;
      margin-left: 50rpx;
      width: 198rpx;
      height: 30rpx;
      font-size: 26rpx;
      font-weight: 400;
      text-align: CENTER;
      color: #326a94;
      line-height: 32rpx;
    }

    .text-right {
      display: inline-block;
      margin-left: 230rpx;
      width: 198rpx;
      height: 30rpx;

      font-size: 26rpx;
      font-weight: 400;
      text-align: CENTER;
      color: #326a94;
      line-height: 32rpx;
    }
  }

  .login-button {
    margin-top: 94rpx;
    margin-left: 164rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 410rpx;
    height: 70rpx;
    background: #f2bb16;
    border-radius: 40rpx;
  }

  .agreement {
    display: inline-block;
    align-items: center;
    justify-content: center;
    .interestthreecheckbox .wx-checkbox-input {
      margin-left: 208rpx;
      border-radius: 50%;
      width: 28rpx;
      height: 28rpx;
    }
  }
  .agreement-text {
    display: inline-block;
    align-items: center;
    justify-content: center;
    margin-left: 20rpx;
    margin-top: 54rpx;
    width: 286rpx;
    height: 32rpx;
    font-size: 26rpx;
    // font-family: Inter, Inter-400;
    font-weight: 400;
    text-align: center;
    color: #000000;
    line-height: 30rpx;

    .xy {
      color: #326A94;
    }
  }
}



</style>